<template>
  <form-item-container
    v-if="permission !== 'H'"
    :id="id"
    :item="item"
    :item-config="itemConfig"
    @select-item="selectItem"
    @delete-item="deleteItem"
    @copy-item="copyItem"
  >
    <a-time-picker
      v-model="formModel"
      popup-container="#RenderForm"
      :disabled="permission === 'D'||permission === 'R'"
      :default-value="config.defaultValue"
      :placeholder="config.placeholder"
      :allow-clear="config.allowClear"
      :type="config.type"
      :format="config.format"
      :position="config.position"
      :use12-hours="config.use12Hours"
      :step="config.step"
      :hide-disabled-options="config.hideDisabledOptions"
      :disable-confirm="config.disableConfirm"
      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds"
      @change="onChange"
    />
  </form-item-container>
</template>

<script lang="ts" setup>
import { inject, defineModel, defineProps, defineEmits, computed } from 'vue';
import { FormPermission } from '@/components/form-design/item-select/config/type';
import FormItemContainer from '@/components/form-design/form-container/container-item/form-item-container.vue';

const formModel = defineModel();

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {
    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  },
  config: {
    type: Object,
    default: () => {
    }
  }
});

const formInstance = inject('formInstance');

const formPermission = inject<any>('formPermission');

const permission = computed<FormPermission>(() => {
  const result = formPermission[props.id];
  if (result) {
    return result;
  }
  return 'E';
});

const emits = defineEmits(['selectItem', 'deleteItem', 'copyItem']);

const selectItem = (value: any) => {
  emits('selectItem', props.item);
};

const deleteItem = (value: any) => {
  emits('deleteItem', props.item);
};

const copyItem = (value: any) => {
  emits('copyItem', props.item);
};

const range = (start: number, end: number) => {
  const result = [];
  for (let i = start; i < end; i += 1) {
    result.push(i);
  }
  return result;
};

const disabledHours = () => {
  if (props.config.disabledHours) {
    try {
      const disabledHoursCallBack = new Function('range', props.config.disabledHours);
      return disabledHoursCallBack.call(formInstance, range);
    } catch (e) {
      console.error(e);
    }
  }
  return [];
};

const disabledMinutes = (selectedHour?: number) => {
  if (props.config.disabledMinutes) {
    try {
      const disabledMinutesCallBack = new Function('selectedHour', 'range', props.config.disabledMinutes);
      return disabledMinutesCallBack.call(formInstance, selectedHour, range);
    } catch (e) {
      console.error(e);
    }
  }
  return [];
};

const disabledSeconds = (selectedHour?: number, selectedMinute?: number) => {
  if (props.config.disabledSeconds) {
    try {
      const disabledSecondsCallBack = new Function('selectedHour', 'selectedMinute', 'range', props.config.disabledSeconds);
      return disabledSecondsCallBack.call(formInstance, selectedHour, selectedMinute, range);
    } catch (e) {
      console.error(e);
    }
  }
  return [];
};

const onChange = (value: string) => {
  if (props.config.onChangeFunction) {
    try {
      const callBack = new Function('value', props.config.onChangeFunction);
      callBack.call(formInstance, value);
    } catch (e) {
      console.error(e);
    }
  }
};

</script>

<script lang="ts">
export default {
  name: 'FormItemTimePicker'
};
</script>

<style lang="less" scoped>

</style>